<template>
	<view class="user-take-money full relative box">
		<view class="form-wrapper">
			<view class="form-item">
				<text class="label">银行卡</text>
				<view class="bank-card">
					<picker :range="list" range-key="bank_name" @change="pickerChange">
						<text>{{ bankName || '请选择银行卡' }}</text>
					</picker>
					<image src="/static/images/chevron-right-gay.png" class="chevron" />
				</view>
			</view>
			<view class="form-item-line"></view>
			<view class="form-item">
				<text class="label">提现金额</text>
				<input class="input-bank" type="digit" placeholder="请输入金额" v-model="money" />
				<text class="prefix">元</text>
			</view>
		</view>
		<view class="confirm-btn" @click="takeMoneyHandle">
			<text>确认</text>
		</view>
	</view>

</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		onLoad(ev) {},
		onShow() {
			this.initData()
		},
		methods: {
			resetData() {
				this.money = ''
				this.id = ''
				this.bankName = ''
			},
			takeMoneyHandle() {
				if (this.loading) return
				const { bankName, money, id } = this
				if (!bankName.length) return this.$toast({ title: '请选择银行卡' })
				if (!money.length) return this.$toast({ title: '请输入金额' })
				this.loading = true
				uni.showLoading({
					title: '正在提现'
				})
				this.https('/store/walletwithdrawal', { ...this.payload, money, bank_id: id }).then(resp => {
					setTimeout(() => {
						uni.hideLoading()
						const { code, data, msg } = resp
						this.loading = false
						this.$toast({ title: msg, time: 2000 }, () => {
							uni.navigateBack()
						})
						if (code === 1) {
							this.resetData()
						}
					}, 400)
				})
			},
			pickerChange(ev) {
				const { value } = ev.detail
				const target = this.list[value * 1]
				if (!target) return
				const { bank_name, id } = target
				this.bankName = bank_name
				this.id = id
			},
			initData() {
				this.https('/store/banklists', this.payload).then(resp => {
					const { code, data, msg } = resp
					if (code !== 1) return
					let list = data || []
					this.list.splice(0, this.list.length, ...list)
					if (!this.list.length) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没有添加银行卡,是否前往添加?',
							success: ev => {
								if (ev.cancel) return
								uni.navigateTo({
									url: '/pages/add-bank/add-bank'
								})
							}
						})
					}
				}).catch(err => {
					this.$toast({ title: '获取银行卡失败', time: 2000 }, () => {
						uni.navigateBack()
					})
				})
			}
		},
		computed: {
			...mapGetters(['payload']),
		},
		data() {
			return {
				loading: false,
				money: '',
				list: [],
				bankName: '',
				id: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-take-money {
		box-sizing: border-box;
		padding: 64rpx 32rpx;
		position: relative;
		background: #F3F3F3;

		.confirm-btn {
			height: 80rpx;
			background: #00809F;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 64rpx;
		}

		.form-wrapper {
			background: #fff;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			overflow: hidden;

			.form-item-line {
				background: #C9CDD4;
				width: 100%;
				height: 1px;
				margin: 34rpx 0
			}

			.form-item {
				display: flex;
				align-items: center;

				.prefix {
					height: 44rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
					margin-left: 8rpx;
				}

				.input-bank {
					width: 140rpx;
					height: 44rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.4);
					margin-left: auto;
					line-height: 44rpx;
					text-align: right;
				}

				.bank-card {
					height: 44rpx;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 44rpx;
					margin-left: auto;
					display: flex;
					align-items: center;

					.chevron {
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}

				.label {
					height: 44rpx;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 44rpx;
				}
			}

		}
	}
</style>